<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>统计分析</cite></a>
        <a><cite>分类销售统计</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">分类销售统计</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><b>销售统计表</b></div>
                        <div class="layui-card-body">
                            <table id="by-type-table-parseData" lay-filter="by-type-table-parseData"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <b>销售统计图</b>
                        </div>
                        <div class="layui-card-body">
                            <!-- 这里写Echarts -->
                            <div class="Echarts_type" style="width: 600px; height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    layui.use(['echarts'], function () {
        var $ = layui.$
            , echarts = layui.echarts;
        var chartDom = $('.Echarts_type');
        var myChart = echarts.init(chartDom[0]);
        var option;
        option = {
            // title: {
            //     text: '某站点用户访问来源',
            //     subtext: '纯属虚构',
            //     left: 'center'
            // },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '商品类型',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '水果' },
                        { value: 735, name: '调味品' },
                        { value: 580, name: '儿童食品' },
                        { value: 484, name: '酒水' },
                        { value: 300, name: '蔬菜' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    })
    layui.use(['table', 'admin', 'form', 'tree'], function () {
        var admin = layui.admin
            , table = layui.table
            , form = layui.form
            , baseUrl = layui.setter.baseUrl
            , $ = layui.$
            , tree = layui.tree;


        //第一个实例
        table.render({
            elem: '#by-type-table-parseData'
            , url: "start/json/echarts/sxt.json"
            // , cellMinWidth: 120
            , loading: true
            , cols: [[
                { field: 'name', title: '商品类型' }
                , { field: 'value', title: '销售额' }
            ]]
            , request: {
                pageName: 'page',
                limitName: 'rows'
            }
            , response: {
                // statusName: 'code',
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });
    });


</script>

<style>
    .update {
        margin-left: 20px;
        /* margin-bottom: 20px; */
    }
</style>